<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js循环语句</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!--循环使用 v-for 指令。-->
<!--v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。-->
<!--v-for 可以绑定数据到数组来渲染一个列表：-->
    <div id="app">
        <ol>
            百米五虎+苏炳添（排名不分先后）
            <li v-for="site in sites">
                姓名：{{site.name}}---------成绩：{{site.score}}
            </li>
        </ol>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                sites:[
                    {name:'尤塞恩·博尔特',score:'9.58s'},
                    {name:'苏炳添',score: '9.83s'},
                    {name:'尤罕·布雷克',score: '9.69s'},
                    {name:'泰森·盖伊',score: '9.69s'},
                    {name:'贾斯汀·加特林',score: '9.74s'},
                    {name:'阿萨法·鲍威尔',score: '9.72s'}
                ]
            }
        })
    </script>


<!--模板中使用v-for指令-->
    <div id="app0">
        <ul>
            <template v-for="site in sites">
                <li>{{ site.name }}</li>
                <li>--------------</li>
            </template>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app0',
            data: {
                sites: [
                    {name:'尤塞恩·博尔特'},
                    {name:'苏炳添'},
                    {name:'尤罕·布雷克'},
                    {name:'泰森·盖伊'},
                    {name:'贾斯汀·加特林'},
                    {name:'阿萨法·鲍威尔'}
                ]
            }
        })
    </script>



<!--v-for 可以通过一个对象的属性来迭代数据：-->
    <div id="app-plus">
        <ul>
            <li v-for="value in object">
                {{value}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app-plus',
            data:{
                object:{
                    name:'菜鸟教程',
                    url:'http://www.runoob.com',
                    slogan:'学的不仅是技术，更是梦想!'
                }
            }
        })
    </script>


<!--也可以提供第二个的参数为键名-->
    <div id="app-plus2">
        <ul>
            <li v-for="(value, key) in object">
                {{ key }} : {{ value }}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app-plus2',
            data:{
                object:{
                    name:'菜鸟教程',
                    url:'http://www.runoob.com',
                    slogan:'学的不仅是技术，更是梦想!'
                }
            }
        })
    </script>


<!--索引-->
    <div id="app-plus3">
        <ul>
            <li v-for="(value, key, index) in object">
                {{ index }}. {{ key }} : {{ value }}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app-plus3',
            data: {
                object: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        })
    </script>
</body>
</html>